import React, { useEffect, useCallback, useRef, useMemo } from 'react';
import ReactDOM from 'react-dom';
import { Button, Tag, Select, Form } from 'antd';
import { useBoolean } from 'ahooks';
// import { mapSfyxBottomIcon, pointIconArr, labelColor } from './config/data';
import { mapSfyxBottomIcon } from './config/data';
import MapItem from './MapItem';
import './index.less';

const { Option } = Select;
const { AMap } = window;
let map;
export default function Amap() {
  const [trafficVisbile, { toggle: toggleTrafficVisible }] = useBoolean(false);
  const trafficRef = useRef();
  const centerMarker = useRef();
  useEffect(() => {
    console.log(123);
    map = new AMap.Map('amap-container', {
      showIndoorMap: false,
      center: [120.222999823, 30.2548760575],
      layers: [new AMap.TileLayer.Satellite(), new AMap.TileLayer.RoadNet()],
      zoom: 14,
      rotation: 15,
      viewMode: '3D',
      pitch: 50,
    });
    map.setFitView();

    // 打点
    const marker = new AMap.Marker({
      position: [120.222999823, 30.2548760575],
    });
    marker.on('click', () => {
      handleMarkerClick(marker.getPosition());
    });
    // map.add(marker);
    centerMarker.current = marker;
  }, []);

  const infoWindow = useMemo(() => {
    return new AMap.InfoWindow({
      isCustom: true,
      content: '<div class="info-window">123</div>',
      // offset: new AMap.Pixel(0, -40),
    });
  }, []);

  const handleTraffic = useCallback(() => {
    if (!trafficVisbile) {
      const trafficLayer = new AMap.TileLayer.Traffic();
      map.add(trafficLayer);
      trafficRef.current = trafficLayer;
    } else {
      map.remove(trafficRef.current);
    }
    toggleTrafficVisible();
  }, [trafficVisbile]);

  const handleMarkerClick = useCallback(position => {
    infoWindow.open(map, position);
    ReactDOM.render(
      <Tag color="orange" onClick={clearAll}>
        123
      </Tag>,
      document.querySelector('.info-window'),
    );
  }, []);

  const clearAll = useCallback(() => {
    map.clearMap();
  }, []);

  return (
    <div className="map-demo">
      <div className="buttons">
        <Button type="primary" ghost onClick={handleTraffic}>
          切换交通地图
        </Button>
        <Button type="primary" ghost onClick={clearAll}>
          清除地图标记
        </Button>
        <Select>
          <Option key="all" value="all">
            全部
          </Option>
          {Object.entries(mapSfyxBottomIcon).map(([key, value]) => {
            return (
              <Option key={key} value={key}>
                <div className="option-label-item">
                  <span role="img" aria-label={key}>
                    <img src={value.icon} alt="" />
                  </span>
                  &nbsp;
                  {value.label}
                </div>
              </Option>
            );
          })}
        </Select>
      </div>
      <div id="amap-container"></div>
      <Form initialValues={{ mapItem: { value: '西湖' } }}>
        <Form.Item name="mapItem" label="地图控件">
          <MapItem />
        </Form.Item>
      </Form>
    </div>
  );
}
